function InitProgres(x, y, value, data, useIcon = true) { // x、y经纬度、value百分比值、data点击触发参数
    var div = document.createElement('div');
    div.setAttribute("id", "divpg");
    div.setAttribute("class", "bar-background");

    var percent = value <= 100 ? value : 100
    var styleColor = ''
    var histogramClass = ''

    if (percent >=70){
        styleColor = 'rgba(0, 220, 124,0.6)'
        histogramClass = 'yuanzhu-green'
    }else if (percent >= 30) {
        styleColor = 'rgba(69, 197, 254,0.6)'
        histogramClass = 'yuanzhu-blue'
    // }else if (percent > 20) {
    //     styleColor = 'rgba(255, 255, 0,0.6)'
    //     histogramClass = 'yuanzhu-yellow'
    }else {
        styleColor = 'rgba(255, 111, 120,0.6)'
        histogramClass = 'yuanzhu-red'
    }

    var pgdiv = `<div id="histogram" style="height: ` + percent*2 + `px;" onclick="histogramOnclick('` + data + `')">`
    if (percent >= 70 && useIcon) {
        pgdiv = pgdiv+  `<label class="perLabUseIcon"  style=" color: ` + styleColor + `;margin-top: 0 auto;">` + percent + `%</label>`;
        pgdiv = pgdiv+  `<img src="`+getJSPathbyName('ZGMapApi.js') + `img/histogram_ok.png" class="histogram-icon"/>`;
    }else if (percent <= 30 && useIcon) {
        pgdiv = pgdiv+  `<label class="perLabUseIcon"  style=" color: ` + styleColor + `;margin-top: 0 auto;">` + percent + `%</label>`;
        pgdiv = pgdiv+  `<img src="`+getJSPathbyName('ZGMapApi.js') + `img/histogram_error.png" class="histogram-icon" />`;
    }else {
        pgdiv = pgdiv+  `<label class="perLab"  style=" color: ` + styleColor + `; margin-top: 0 auto;">` + percent + `%</label>`;
    }
    var temp = percent*2 -30 -14
    pgdiv = pgdiv + `<br><div id="ttt" class="` + histogramClass + `" style="height: ` +  temp + `px;"></div>`;
    pgdiv = pgdiv + '</div>';


    var pt = ol.proj.transform([x, y], 'EPSG:4326', 'EPSG:3857');
    var warn_overlay = new ol.Overlay.Popup({
            popupClass: "tooltips", //"tooltips", "warning" "black" "default", "tips", "shadow",
            closeBox: false,
            positioning: 'bottom-center',
            autoPan: false,
            autoPanAnimation: { duration: 250 }
        });
    map.addOverlay(warn_overlay);
    warn_overlay.show(pt, pgdiv);
}

function DelOverlay() {
    var m_Overlay= map.getOverlays().getArray();
    for (var i = m_Overlay.length-1; i > 2; i--) {
        map.getOverlays().removeAt(i);
    }
}

function histogramOnclick(data) {
    console.log(data)
    // console.info(JSON.parse(data))
}
